import { FormConfig } from '../types'
import { FieldRendererFactory, ContextDisplayRenderer } from '../components'
import { generateFormScript } from './formScript'
import { formStyles } from '../formStyles'

export function generateFormHtml(config: FormConfig, debugHtml: string, debugStyles: string, debugScript: string): string {
  const factory = new FieldRendererFactory()
  const contextRenderer = new ContextDisplayRenderer()

  // 生成上下文信息 HTML
  const contextHtml = contextRenderer.render(config.context)

  // 生成表单字段 HTML
  const fieldsHtml = config.fields.map(field => factory.renderField(field)).join('')

  // 生成脚本
  const formScript = generateFormScript(config)

  return `
  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>${config.panelTitle}</title>
      <style>
        ${formStyles}
        ${debugStyles}
      </style>
  </head>
  <body>
      ${debugHtml}
      
      <div class="form-container">
          <div class="form-title">${config.title}</div>
          
          ${contextHtml}
          
          <form id="genericForm">
              ${fieldsHtml}
              
              <div class="form-actions">
                  <button type="button" class="btn btn-secondary" id="cancelBtn">取消</button>
                  <button type="submit" class="btn btn-primary">保存</button>
              </div>
          </form>
      </div>
      
      <script>
          ${debugScript}
          ${formScript}
      </script>
  </body>
  </html>`
}
